feat Custom command dashboard

Author: rmevans9

docs/custom-commands.md

@@ -0,0 +1,31 @@
+# Setting up custom commands
+
+Reactotron supports registering custom commands that can do anything you want when they are executed. When there are registered commands you can find them in the "Custom Commands" tab in reactotron.
+
+## Registering a command
+
+```js
+// Way 1
+Reactotron.onCustomCommand({
+  command: "test2",
+  handler: () => console.log("This is an example 2"),
+
+  // Optional settings
+  title: "A thing", // This shows on the button
+  description: "The desc", // This shows below the button
+})
+
+// Way 2
+Reactotron.onCustomCommand("test", () => console.log("This is an example"))
+```
+
+## Unregistering a command
+
+```js
+const selfRemoving = Reactotron.onCustomCommand({ // Save the result
+  command: "remove",
+  handler: () => {
+    selfRemoving() // Calling it unregisters the command
+  },
+})
+```

docs/tips.md

@@ -124,31 +124,3 @@ the state like this:
 
 This will `nav` mutable. Note this is what you want to do when using
 [react-navigation's default reducer](https://github.com/react-community/react-navigation/blob/master/docs/guides/Redux-Integration.md).
-
-
-## Custom Commands
-
-Need a custom Reactotron plugin but don't have time to write one?
-
-In the Reactotron App, you can press `command+.` (mac) or  `ctrl+.` (windows/linux) to send a custom command.
-
-These commands can be useful for things like:
-
-* clearing async storage
-* triggering an api call
-* calling functions on hard-to-reach places
-* sending info back to reactotron app
-
-Writing your own Reactotron middleware makes this happen.  Check out this example:
-
-```js
-import Reactotron from 'reactotron-react-native'
-
-Reactotron.use(tron => ({
-  onCommand({ type, payload }) {
-    if (type === 'custom') {
-      tron.display({ name: 'ECHO', preview: payload })
-    }
-  },
-}))
-```

examples/ReactotronTester/app/config/ReactotronConfig.ts

@@ -17,5 +17,23 @@ Reactotron.use(reduxPlugin())
 Reactotron.use(sagaPlugin({}))
 Reactotron.use(mst())
 
+Reactotron.onCustomCommand("test", () => console.log("This is an example"))
+
+Reactotron.onCustomCommand({
+  command: "test2",
+  handler: () => console.log("This is an example 2"),
+
+  // Optional settings
+  title: "A thing",
+  description: "The desc",
+})
+
+const selfRemoving = Reactotron.onCustomCommand({
+  command: "remove",
+  handler: () => {
+    selfRemoving()
+  },
+})
+
 Reactotron.connect()
 Reactotron.clear()

examples/ReactotronTester/copy-internal-deps.sh

@@ -23,8 +23,8 @@ rm -f node_modules/reactotron-apisauce
 cd ../../../reactotron-core-client
 yarn run build:dev
 cd ../reactotron/examples/ReactotronTester
-mkdir -p ./node_modules/reactotron-react-native/node_modules/reactotron-core-client
-cp ../../../reactotron-core-client/dist/index.js ./node_modules/reactotron-react-native/node_modules/reactotron-core-client/index.js
+mkdir -p ./node_modules/reactotron-core-client
+cp ../../../reactotron-core-client/dist/index.js ./node_modules/reactotron-core-client/index.js
 
 # reactotron-react-native
 cd ../../../reactotron-react-native

package.json

@@ -39,6 +39,8 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "@types/react": "^16.8.15",
+    "@types/react-dom": "^16.8.4",
     "color": "^3.0.0",
     "core-js": "2",
     "css-modules-require-hook": "^4.2.2",

readme.md

@@ -9,7 +9,7 @@
 Reactotron is a macOS, Windows, and Linux app for inspecting your [React JS](https://facebook.github.io/react/) and [React Native](https://facebook.github.io/react-native/) apps.
 
 *Watch [Darin Wilson's](https://github.com/darinwilson) talk at [Chain React](https://infinite.red/ChainReactConf): [Chain React 2018: Debugging and Beyond with Reactotron](https://www.youtube.com/watch?v=UiPo9A9k7xc)!*
- 
+
 Use it to:
 
 * view your application state
@@ -36,6 +36,7 @@ You plug it into your app as a dev dependency so it adds nothing to your product
 * [Installing](./docs/installing.md)
 * Quick start for [React JS](./docs/quick-start-react-js.md)
 * Quick start for [React Native](./docs/quick-start-react-native.md)
+* [Custom Commands](./docs/custom-commands.md)
 * [Tracking errors globally](./docs/plugin-track-global-errors.md)
 * [Open in editor](./docs/plugin-open-in-editor.md)
 * [Image Overlays](./docs/plugin-overlay.md)

src/CustomCommands/CustomCommandsList.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import { inject, observer } from "mobx-react"
+import CustomCommandsListHeader from "./CustomCommandsListHeader"
+import Colors from "../Theme/Colors"
+import AppStyles from "../Theme/AppStyles"
+
+const Styles = {
+  container: {
+    ...AppStyles.Layout.vbox,
+    margin: 0,
+    flex: 1,
+  },
+
+  buttonsContainer: {
+    paddingTop: "20px",
+    paddingLeft: "40px",
+    overflowY: "scroll",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+  },
+  buttonContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(50% - 8px)",
+    padding: "4px",
+  },
+  commandTitle: {
+    fontSize: "24px",
+    color: "white",
+  },
+  commandDescription: {
+    marginTop: "12px",
+    color: "#929292",
+  },
+  button: {
+    backgroundColor: Colors.backgroundLighter,
+    borderRadius: "4px",
+    minHeight: "50px",
+    alignItems: "center",
+    justifyContent: "center",
+    display: "flex",
+    width: "200px",
+    marginTop: "18px",
+    marginBottom: "24px",
+    cursor: "pointer",
+    color: "white",
+    transition: "background-color 0.25s ease-in-out",
+  },
+  text: {
+    color: Colors.foreground,
+    textAlign: "center",
+  },
+}
+
+interface Props {
+  session: any
+}
+
+interface State {
+  search: string
+}
+
+@inject("session")
+@observer
+export default class CustomCommandsList extends React.Component<Props, State> {
+  state = {
+    search: "",
+  }
+
+  handleSearchChange = e => {
+    this.setState({
+      search: e.target.value,
+    })
+  }
+
+  filterSearch = item => {
+    const { search } = this.state
+
+    if (search === "") return true
+
+    const lowerSearch = search.toLowerCase()
+
+    return (
+      item.command.toLowerCase().indexOf(lowerSearch) > -1 ||
+      (!!item.title && item.title.toLowerCase().indexOf(lowerSearch) > -1) ||
+      (!!item.description && item.description.toLowerCase().indexOf(lowerSearch) > -1)
+    )
+  }
+
+  executeCommand(command) {
+    this.props.session.ui.sendCustomMessage(command)
+  }
+
+  renderButton(item) {
+    return (
+      <div
+        key={item.command}
+        style={Styles.buttonContainer}
+        onClick={() => this.executeCommand(item.command)}
+      >
+        <div style={Styles.commandTitle}>{item.title || item.command}</div>
+        <div style={Styles.commandDescription}>
+          {item.description ? item.description : "No Description Provided"}
+        </div>
+
+        <div className="button custom-commands-list-button" style={Styles.button}>
+          Send Command
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    const { customCommands } = this.props.session
+    const { search } = this.state
+
+    return (
+      <div style={Styles.container as any}>
+        <CustomCommandsListHeader search={search} onSearchChange={this.handleSearchChange} />
+        <div style={Styles.buttonsContainer as any}>
+          {customCommands.filter(this.filterSearch).map(cc => this.renderButton(cc))}
+        </div>
+      </div>
+    )
+  }
+}